﻿<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
		window.onload = function () {
			var chart = new CanvasJS.Chart("chartContainer1", {
				theme: "theme2",
				title: {
					text: "Earthquakes - per month"
				},
				animationEnabled: true,
				axisX: {
					valueFormatString: "MMM",
					interval: 1,
					intervalType: "month"

				},
				axisY: {
					includeZero: false

				},
				data: [{
					type: "line",
					//lineThickness: 3,
					dataPoints: [
					{ x: new Date(2012, 00, 1), y: 450 },
					{ x: new Date(2012, 01, 1), y: 414 },
					{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
					{ x: new Date(2012, 03, 1), y: 460 },
					{ x: new Date(2012, 04, 1), y: 450 },
					{ x: new Date(2012, 05, 1), y: 500 },
					{ x: new Date(2012, 06, 1), y: 480 },
					{ x: new Date(2012, 07, 1), y: 480 },
					{ x: new Date(2012, 08, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
					{ x: new Date(2012, 09, 1), y: 500 },
					{ x: new Date(2012, 10, 1), y: 480 },
					{ x: new Date(2012, 11, 1), y: 510 }
					]
				}
				]
			});

			chart.render();

			var chart = new CanvasJS.Chart("chartContainer2", {
				title: {
					text: "Share Value over a Year"
				},
				theme: "theme2",
				animationEnabled: true,
				axisX: {
					valueFormatString: "MMM"
				},
				axisY: {
					valueFormatString: "#0$"
				},
				data: [{
					type: "line",
					dataPoints: [
					{ x: new Date(2012, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
					{ x: new Date(2012, 02, 1), y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
					{ x: new Date(2012, 03, 1), y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
					{ x: new Date(2012, 04, 1), y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
					{ x: new Date(2012, 05, 1), y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
					{ x: new Date(2012, 06, 1), y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
					{ x: new Date(2012, 07, 1), y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
					{ x: new Date(2012, 08, 1), y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
					{ x: new Date(2012, 09, 1), y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 }
					]
				}
				]
			});

			chart.render();

			var chart = new CanvasJS.Chart("chartContainer3", {
				title: {
					text: "Site Traffic",
					fontSize: 30
				},
				animationEnabled: true,
				axisX: {

					gridColor: "Silver",
					tickColor: "silver",
					valueFormatString: "DD/MMM"

				},
				toolTip: {
					shared: true
				},
				theme: "theme2",
				axisY: {
					gridColor: "Silver",
					tickColor: "silver"
				},
				legend: {
					verticalAlign: "bottom",
					horizontalAlign: "center"
				},
				data: [{
					type: "line",
					showInLegend: true,
					lineThickness: 2,
					name: "Visits",
					markerType: "square",
					color: "#F08080",
					dataPoints: [
					{ x: new Date(2010, 0, 3), y: 650 },
					{ x: new Date(2010, 0, 5), y: 700 },
					{ x: new Date(2010, 0, 7), y: 710 },
					{ x: new Date(2010, 0, 9), y: 658 },
					{ x: new Date(2010, 0, 11), y: 734 },
					{ x: new Date(2010, 0, 13), y: 963 },
					{ x: new Date(2010, 0, 15), y: 847 },
					{ x: new Date(2010, 0, 17), y: 853 },
					{ x: new Date(2010, 0, 19), y: 869 },
					{ x: new Date(2010, 0, 21), y: 943 },
					{ x: new Date(2010, 0, 23), y: 970 }
					]
				},
				{
					type: "line",
					showInLegend: true,
					name: "Unique Visits",
					color: "#20B2AA",
					lineThickness: 2,

					dataPoints: [
					{ x: new Date(2010, 0, 3), y: 510 },
					{ x: new Date(2010, 0, 5), y: 560 },
					{ x: new Date(2010, 0, 7), y: 540 },
					{ x: new Date(2010, 0, 9), y: 558 },
					{ x: new Date(2010, 0, 11), y: 544 },
					{ x: new Date(2010, 0, 13), y: 693 },
					{ x: new Date(2010, 0, 15), y: 657 },
					{ x: new Date(2010, 0, 17), y: 663 },
					{ x: new Date(2010, 0, 19), y: 639 },
					{ x: new Date(2010, 0, 21), y: 673 },
					{ x: new Date(2010, 0, 23), y: 660 }
					]
				}
				],
			});

			chart.render();

			var chart = new CanvasJS.Chart("chartContainer4", {
				zoomEnabled: false,
				animationEnabled: true,
				title: {
					text: "Mobile Phone Subscriptions"
				},
				axisY2: {
					valueFormatString: "0.0 bn",

					maximum: 1.2,
					interval: .2,
					interlacedColor: "#F5F5F5",
					gridColor: "#D7D7D7",
					tickColor: "#D7D7D7"
				},
				theme: "theme2",
				toolTip: {
					shared: true
				},
				legend: {
					verticalAlign: "bottom",
					horizontalAlign: "center",
					fontSize: 15,
					fontFamily: "Lucida Sans Unicode"
				},
				data: [{
					type: "line",
					lineThickness: 3,
					axisYType: "secondary",
					showInLegend: true,
					name: "India",
					dataPoints: [
					{ x: new Date(2001, 0), y: 0 },
					{ x: new Date(2002, 0), y: 0.001 },
					{ x: new Date(2003, 0), y: 0.01 },
					{ x: new Date(2004, 0), y: 0.05 },
					{ x: new Date(2005, 0), y: 0.1 },
					{ x: new Date(2006, 0), y: 0.15 },
					{ x: new Date(2007, 0), y: 0.22 },
					{ x: new Date(2008, 0), y: 0.38 },
					{ x: new Date(2009, 0), y: 0.56 },
					{ x: new Date(2010, 0), y: 0.77 },
					{ x: new Date(2011, 0), y: 0.91 },
					{ x: new Date(2012, 0), y: 0.94 }
					]
				},
				{
					type: "line",
					lineThickness: 3,
					showInLegend: true,
					name: "China",
					axisYType: "secondary",
					dataPoints: [
					{ x: new Date(2001, 00), y: 0.18 },
					{ x: new Date(2002, 00), y: 0.2 },
					{ x: new Date(2003, 0), y: 0.25 },
					{ x: new Date(2004, 0), y: 0.35 },
					{ x: new Date(2005, 0), y: 0.42 },
					{ x: new Date(2006, 0), y: 0.5 },
					{ x: new Date(2007, 0), y: 0.58 },
					{ x: new Date(2008, 0), y: 0.67 },
					{ x: new Date(2009, 0), y: 0.78 },
					{ x: new Date(2010, 0), y: 0.88 },
					{ x: new Date(2011, 0), y: 0.98 },
					{ x: new Date(2012, 0), y: 1.04 }
					]
				},
				{
					type: "line",
					lineThickness: 3,
					showInLegend: true,
					name: "USA",
					axisYType: "secondary",
					dataPoints: [
					{ x: new Date(2001, 00), y: 0.16 },
					{ x: new Date(2002, 0), y: 0.17 },
					{ x: new Date(2003, 0), y: 0.18 },
					{ x: new Date(2004, 0), y: 0.19 },
					{ x: new Date(2005, 0), y: 0.20 },
					{ x: new Date(2006, 0), y: 0.23 },
					{ x: new Date(2007, 0), y: 0.261 },
					{ x: new Date(2008, 0), y: 0.289 },
					{ x: new Date(2009, 0), y: 0.3 },
					{ x: new Date(2010, 0), y: 0.31 },
					{ x: new Date(2011, 0), y: 0.32 },
					{ x: new Date(2012, 0), y: 0.33 }
					]
				}
				],
				legend: {
					cursor: "pointer",
					itemclick: function (e) {
						if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
							e.dataSeries.visible = false;
						}
						else {
							e.dataSeries.visible = true;
						}
						chart.render();
					}
				}
			});

			chart.render();
		}
	</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>

<body>
	<div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>
	<div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div>
	<br />
	<div id="chartContainer3" style="width: 45%; height: 300px;display: inline-block;"></div>
	<div id="chartContainer4" style="width: 45%; height: 300px;display: inline-block;"></div>
</body>

</html>